<template>
	<view class="content">
		<view class="header">
			<swiper indicator-dots="true" autoplay="true" interval="2000" circular="true" :duration="1000">
				<swiper-item class="swiperitem1" v-for="item in swiperlist" :key="item.id">
					<image mode="widthFix" :src="item.url"></image>
				</swiper-item>
			</swiper>
		</view>
		
	
		
		<view class="remen">
			<view class="remen_header">
				 <view class="icoleft">
				 	<text class="iconfont icon-huo"></text>
				 </view>
				 <view class="rementitle">
				 	<text class="retitle">热门推荐</text>
				 </view>
			</view>
		</view>
		<scroll-view scroll-x="true" class="scrollview">
			<view class="con">
				<view @click="goitem(item.id)" class="scrollitem" v-for="item in hotlist" :key="item.id">
					<image :src="item.imgurl" mode="aspectFill" class="image1"></image>
					<view class="movietitle">{{item.title}}</view>
					<view class="itemfooter">
						<star :score='item.star' />
					</view>
				</view>	
			</view>
		</scroll-view>
		
		
		<view class="remen">
			<view class="remen_header">
				 <view class="icoleft">
				 	<text class="iconfont icon-ue732notice-copy"></text>
				 </view>
				 <view class="rementitle">
				 	<text class="retitle">推荐视频</text>
				 </view>
			</view>
		</view>
		
		<view class="videolist">
			<view class="videoitem" v-for="item in videolist" :key="item.id">
				<video id="item.url" class="video1" :src="item.url"
				controls @play="meplay(item.url)" @ended="ended"></video>
			</view>
		</view>
		
		<view class="remen">
			<view class="remen_header">
				 <view class="icoleft">
				 	<text class="iconfont icon-cainixihuan"></text>
				 </view>
				 <view class="rementitle">
				 	<text class="retitle">猜你喜欢</text>
				 </view>
			</view>
		</view>
		
		<view class="chai">
				<view  class="chaiitem" v-for="item in likeslist" :key="item.id">
					<view class="left" @click="goitem(item.id)">
						<image :src="item.imgurl" mode="aspectFill"></image>
					</view>
					<view class="right">
						<text @click="goitem(item.id)" class="title">{{item.title}}</text>
						<star :score='item.star' />
						<text class="list1">类型：{{item.catagory}}</text>
						<text class="list1">上映时间：{{item.pushdate}}</text>
						<view class="zan">
							<text @click="changezhan" v-show="!iszhan" class="iconfont icon-dianzan"></text>
							<text  @click="changezhan" v-show="iszhan" class="iconfont icon-zan color2"></text>
							<text  @click="changezhan" v-show="iszhan" class="iconfont icon-yijin14-cai-copy"></text>
							<text  @click="changezhan" v-show="!iszhan" class="iconfont icon-yijin14-cai color2"></text>
						</text>
					</view>
				</view>
		</view>
		</view>
	</view>
</template>

<script>
	import { request } from "../../request/index.js"
	import star from '../../components/star.vue'
	export default {
		data() {
			return {
				iszhan:true,
				swiperlist:[
					{url:"http://127.0.0.1:3000/public/images/1.jpg",id:1},
					{url:"http://127.0.0.1:3000/public/images/2.jpg",id:2},
					{url:"http://127.0.0.1:3000/public/images/3.jpg",id:3},
				],
				hotlist:[],
				videolist:[
					{url:"http://127.0.0.1:3000/public/video/ceshi.mp4",id:1},
					{url:"http://127.0.0.1:3000/public/video/ceshi2.mp4",id:2},
					{url:"http://127.0.0.1:3000/public/video/ceshi3.mp4",id:3},
					{url:"http://127.0.0.1:3000/public/video/ceshi4.mp4",id:4},
				],
				isplay:false,
				likeslist:[]
			}
		},
		onLoad() {
			// this.getswiperlist(),
			this.gethotlist()
			this.getlikeslist()
		},
		//下拉刷新
		   onPullDownRefresh() {
		        request({
		        	url:'/indexcarousel/movies/likes',
		        	method:'get',	 
		        }).then(res=>{
		        	// console.log(res)
		        	this.likeslist=res.data.data
					setTimeout(function () {
					    uni.stopPullDownRefresh();
					}, 500);
		        })      
		    },
			
			onReachBottom(){
				this.getlikeslist()
			},
		components:{
			star
		},
		methods: {
			//视频播放(bug)
			meplay(e){
				this.ctx=uni.createVideoContext(e)
				arr.forEach(item=>{
					if(item.url!=e){
						uni.createVideoContext(item.url).pause()
					}	
				})	
			},
			
			//跳转到详情页
				goitem(e){
					// console.log(e)
					uni.navigateTo({
						url:`../movie/movie?id=${e}`
					})
				},
			//点赞
			changezhan(){
				this.iszhan=!this.iszhan
			},
			//关闭全屏
			ended(){
				this.isplay=false
			},
	
			//轮播图
		getswiperlist(){
			request({
				url:'/indexcarousel/list',
				method:'get',	 
			}).then(res=>{
				this.swiperlist=res.data.data
			})
		},
		//热门推荐
		gethotlist(){
			request({
				url:'/indexcarousel/movies/hot',
				method:'get',	 
			}).then(res=>{
				// console.log(res)
				this.hotlist=res.data.data
			})
		},
		
		//猜你喜欢
		getlikeslist(){
			request({
				url:'/indexcarousel/movies/likes',
				method:'get',	 
			}).then(res=>{
				// console.log(res)
				this.likeslist=[...this.likeslist,...res.data.data]
			})
		},
			
		}
	}
</script>

<style lang='less' scoped>
	.color2{
		color: red;
	}
	.content{
		position: relative;
		.header{
			swiper{
				width: 100vw;
				height:calc(100vw*440/750);
				swiper-item{
					image{
						width: 100%;
					}
				}
			}
		}
		
		.remen{
			background-color: #ddd;
			width: 100vw;
			height: 40px;
			line-height: 40px;
			.remen_header{
				display: flex;
			.icoleft{
				flex:1;
				text-align: center;
				color: #e74c3c;
				.icon-huo{
					font-size: 24px;
				}
			}	
			.rementitle{
				flex:7;
				.retitle{
				font-size: 24px;
				font-weight: 700;
				}
			}
			}
		}
		
		.scrollview{
			max-width: 100vw;
			.con{
				width: 100vw;
				display: flex;
				.scrollitem{
					width: 33%;
					margin-right: 15upx;
					display: flex;
					flex-direction: column;
					.image1{
						width: 240upx;
							height: 300upx; 
					}
					.movietitle{
						white-space: nowrap;
						overflow: hidden;
						tetx-overflow:ellipese;
						font-size: 14px;
						color: #bbb;
						text-align: center;
					}
					.itemfooter{}
				}
			}
			
		}
		
		.videolist{
			display: flex;
			flex-wrap: wrap;
			.videoitem{
				text-align: center;
				width: 50%;
				padding: 10upx;
				.video1{
				width: 330upx;
				height: 200upx;
				}
				.video2{
					position: absolute;
					top: 20%;
					left:0;
					width: 100vw;
					height:400upx;
				}
			}
		}
		
		.chai{
			width: 100vw;
		.chaiitem{
			width: 100%;
			display: flex;
			margin-top: 10upx;
			border-bottom: 1px solid #ccc;
			.left{
				flex:1;
				padding: 10upx;
				image{
					width:350upx;
					height: 400upx;
				}
			}
			.right{
				flex:1;
				padding-right:10upx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				
			.title{
				font-size: 20px;
				font-weight: 500;
				display: block;
			}
				.list1{
					font-size: 14px;
					display: block;
					color: #ccc;
				}
				.zan{
					.iconfont{
						margin-left:15upx;
						font-size: 40upx;
					}
				}
			}
		}	
		}
		
	}

</style>
